<template>
  <view class="template-circle tn-safe-area-inset-bottom">
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#342C67">
      <view class="tn-flex tn-flex-row-between tn-margin-sm">
        <view style="width: 60%">
          <tn-tabs-swiper
            ref="tabs"
            :bold="true"
            :activeItemStyle="activeItemStyle"
            inactiveColor="#fff"
            activeColor="#24D4D1"
            :list="list"
            :current="currenttiezi"
            :isScroll="false"
            @change="tabsChange"
            style="font-size: 36rpx"
          >
          </tn-tabs-swiper>
        </view>
      </view>
    </tn-nav-bar>

    <!-- 推荐 -->
    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
      <view
        class="tn-flex tn-flex-direction-column tn-margin-bottom"
        :style="{ paddingTop: vuex_custom_bar_height + 'px' }"
      >
        <view
          class="tn-flex tn-flex-row-between"
          v-if="configInfo.is_quanzi == 1 && currenttiezi == 1"
        >
          <view
            class="justify-content-item tn-text-bold"
            style="
              font-size: 28rpx;
              color: #fff;
              margin-top: 30rpx;
              margin-bottom: 20rpx;
              margin-left: 40rpx;
            "
          >
            圈子推荐
          </view>
        </view>
        <view
          class="tn-flex tn-flex-row-between"
          v-if="configInfo.is_quanzi == 1 && currenttiezi == 1"
          style="padding: 0 40rpx"
        >
          <block
            v-for="(item, indexmygroup) in bloggerList"
            :key="indexmygroup"
            v-show="indexmygroup < 7"
          >
            <view class="" @click="tn('/circleMixinPages/group?id=' + item.id)">
              <view
                class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
              >
                <view class="tn-radius">
                  <view
                    class="image-pic"
                    :style="'background-image:url(' + item.image + ')'"
                    style="width: 108rpx; height: 108rpx"
                  >
                    <!-- <view class="image-circle"> </view> -->
                  </view>
                  <view
                    class="tn-text-center"
                    style="margin-top: 20rpx; font-size: 24rpx; color: #d8d8d8"
                    >{{ item.title }}
                  </view>
                  <!-- <view
                    class="tn-text-center tn-text-xs tn-color-gray--dark tn-padding-top-xs"
                  >
                    {{ item.follow_num }}人关注
                  </view> -->
                </view>
              </view>
            </view>
          </block>
          <view @click="tn('/homeMixinPages/quanclass')">
            <view
              style="
                background: rgba(216, 216, 216, 0.5);
                width: 108rpx;
                height: 108rpx;
                border-radius: 10rpx;
                padding: 8rpx;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
              "
            >
              <image
                v-for="item in 4"
                :key="item"
                :src="`../../../static/other/quanbu${item - 1}.png`"
                alt=""
                style="width: 42rpx; height: 42rpx"
              />
            </view>
            <view
              class="tn-text-center"
              style="margin-top: 20rpx; font-size: 24rpx; color: #d8d8d8"
              >全部圈子</view
            >
          </view>
        </view>

        <view v-if="currenttiezi == 1">
          <view v-if="configInfo.is_show_huodong == 1">
            <view class="" style="margin-top: 50rpx">
              <view class="tn-flex tn-flex-row-between">
                <view
                  class="justify-content-item tn-margin tn-text-bold tn-text-xl"
                >
                  线下活动
                </view>
                <view
                  class="justify-content-item tn-margin tn-text-lg tn-color-grey"
                  @click="tn('/circleMixinPages/reserve')"
                >
                  <text class="tn-padding-xs">全部</text>
                  <text class="tn-icon-search-menu"></text>
                </view>
              </view>
            </view>

            <view
              class="tn-margin-left tn-text-sm tn-color-gray"
              style="margin-top: -25rpx"
            >
              <text>参加线下活动，找到心中的TA</text>
            </view>

            <view class="tn-margin-bottom-lg">
              <block
                v-for="(item, indexhuodong) in huodonglist"
                :key="indexhuodong"
              >
                <view
                  class="article-shadow tn-margin"
                  @click="tn('/circleMixinPages/reserve_show?id=' + item.id)"
                >
                  <view class="tn-flex">
                    <view
                      class="image-pic tn-margin-sm"
                      :style="'background-image:url(' + item.images + ')'"
                    >
                      <view class="image-article"> </view>
                    </view>
                    <view
                      class="tn-margin-sm tn-padding-top-xs"
                      style="width: 100%"
                    >
                      <view
                        class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify"
                      >
                        {{ item.title }}
                      </view>
                      <view
                        class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs"
                        style="min-height: 105rpx"
                      >
                        <view
                          class="justify-content-item tn-flex tn-flex-col-center"
                        >
                          {{ item.address }}
                        </view>
                        <view
                          class="justify-content-item tn-flex tn-flex-col-center"
                        >
                          <text class="tn-color-gray"
                            >{{ item.join_num + item.join_nv_num }}人参与</text
                          >
                        </view>
                      </view>
                      <view
                        class="tn-flex tn-flex-row-between tn-flex-col-between"
                      >
                        <view
                          class="justify-content-item tn-color-gray tn-text-center tn-color-gray"
                          style="padding-top: 5rpx"
                        >
                          <text class="tn-padding-right tn-text-df">{{
                            item.times
                          }}</text>
                          <text
                            class="tn-icon-eye tn-padding-right-xs tn-text-lg"
                          ></text>
                          <text class="tn-padding-right tn-text-df">{{
                            item.view_num
                          }}</text>
                          <text
                            class="tn-icon-fire tn-padding-right-xs tn-text-lg"
                          ></text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
          <!-- 
          <view class="" style="margin-top: -20rpx">
            <view class="tn-flex tn-flex-row-between">
              <view
                class="justify-content-item tn-margin tn-text-bold tn-text-xl"
              >
                热门话题
              </view>
            </view>
          </view>

          <view
            class="tn-margin-left tn-text-sm tn-color-gray"
            style="margin-top: -25rpx"
            @click="
              navigateToFn({
                url: '/circleMixinPages/tags_more',
                checkLogin: false,
              })
            "
          >
            <text>这是今日热门话题，请查收吖</text>
          </view> -->

          <!-- <view class="huati">
            <view class="tn-plan-content" style="padding: 20rpx">
              <view
                class="tn-flex tn-flex-row-between tn-flex-col-center"
                style="margin-bottom: 32rpx"
              >
                <view class="tn-flex tn-flex-col-center">
                  <img
                    src="../../../static/other/huatiIcon.png"
                    alt=""
                    style="width: 32rpx; height: 32rpx; margin-right: 10rpx"
                  />
                  <span class="huatititle">热门话题</span>
                </view>
                <view style="color: rgba(255, 255, 255, 0.5); font-size: 20rpx"
                  >更多<text
                    class="tn-icon-right"
                    style="margin-left: 4rpx"
                  ></text
                ></view>
              </view>
              <view
                class="tn-flex tn-flex-col-center huatiList"
                v-for="(item, indexhuati) in tags.slice(0, 4)"
                :key="indexhuati"
                @click="
                  navigateToFn({
                    url: `/circleMixinPages/tags_list?id=${item.id}`,
                    checkLogin: false,
                  })
                "
              >
                <view
                  style="
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 10rpx;
                    background: #fff;
                  "
                ></view>
                <view
                  class="tn-flex tn-flex-direction-column tn-flex-center huati-item"
                  style="margin-left: 16rpx"
                >
                  <view class="tn-flex tn-flex-col-center">
                    <p class="text">#{{ item.title }}</p>
                    <img
                      v-if="indexhuati <= 1"
                      style="width: 24rpx; height: 24rpx; margin-left: 18rpx"
                      src="../../../static/other/hotIcon.png"
                      alt=""
                    />
                  </view>
                  <text
                    style="
                      font-size: 20rpx;
                      color: rgba(255, 255, 255, 0.5);
                      margin-top: 4rpx;
                    "
                    >200W热度</text
                  >
                </view>
              </view>
            </view>
          </view> -->
        </view>
        <view
          style="
            background: rgba(0, 0, 0, 0.3);
            border-radius: 5px 5px 0 0;
            padding: 24rpx 20rpx;
            margin-top: 16rpx;
          "
        >
          <quanIistCircle
            :list="content"
            :tags="tags"
            :index="true"
          ></quanIistCircle>
        </view>
      </view>
    </mescroll-body>

    <!-- <tn-fab
      left="50%"
      bottom="140rpx"
      width="260rpx"
      height="60rpx"
      iconSize="50"
      backgroundColor="linear-gradient(180deg, #4185ff 0%, #55dffc 100%)"
      fontColor="#FFFFFF"
      :showMask="true"
    >
      <view class="tn-icon-edit" style="font-size: 50rpx"></view>
    </tn-fab> -->
    <view class="fab" @click="fabu()">
      <img src="../../../static/other/penicon.png" alt="" />
      <text>发布新动态</text>
    </view>

    <!-- 登录框组件 -->
    <login-fn
      :is-show-login="loginBoxFlag"
      @loginSuccessCallback="refreshFn"
      @close="closeGlobalLoginFn"
    >
    </login-fn>
    <!-- 压屏窗-->
    <tn-landscape
      :show="tanchuangshow"
      :maskCloseable="false"
      closePosition="rightTop"
      @close="closeLandscape"
    >
      <image
        :src="tanchuanglistimage"
        mode="widthFix"
        @click="tanchuang()"
      ></image>
    </tn-landscape>
    <view style="height: 50px"></view>

    <tn-popup
      v-model="tishishow"
      width="80%"
      mode="center"
      backgroundColor=""
      :borderRadius="30"
      :closeBtn="false"
      :maskCloseable="false"
    >
      <view class="custom-modal-content tn-padding-sm">
        <view class="tn-text-center" style="font-size: 16px">
          <view
            class="tn-icon-tips"
            style="font-size: 60px; color: #5f4fd9"
          ></view>
        </view>

        <view class="tn-text-center tn-color-black">
          {{ titletip }}
        </view>

        <view
          v-if="titletip == '请上传头像'"
          class="tn-text-center tn-padding-top"
          @click="
            tishishow = false;
            navigateToFn({
              url: '/mineMixinPages/my_home?type=tou',
              checkLogin: true,
            });
          "
        >
          <tn-button
            :fontSize="28"
            padding="20rpx"
            height="56rpx"
            backgroundColor="tn-main-gradient-purple"
            fontColor="tn-color-white"
            >去上传头像
          </tn-button>
        </view>
        <view
          v-else
          class="tn-text-center tn-padding-top"
          @click="
            tishishow = false;
            navigateToFn({ url: '/mineMixinPages/set', checkLogin: true });
          "
        >
          <tn-button
            :fontSize="28"
            padding="20rpx"
            height="56rpx"
            backgroundColor="tn-main-gradient-purple"
            fontColor="tn-color-white"
            >去完善资料
          </tn-button>
        </view>

        <view class="tn-text-center tn-padding-top" @click="tishishow = false">
          <tn-button
            :fontSize="28"
            padding="20rpx"
            height="56rpx"
            backgroundColor="tn-main-gradient-aquablue--light"
            >先看看再说
          </tn-button>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import { host } from "@/siteinfo.js";
import silenceUpdate from "@/uni_modules/rt-uni-update/js_sdk/silence-update.js"; //引入静默更新
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import quanIistCircle from "@/components/quan-list/quan-list-circle.vue";

export default {
  name: "",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
    quanIistCircle,
  },
  data() {
    return {
      tishishow: false,
      titletip: "",
      body: [],
      tags: [],
      shoplist: [],
      vodurl: "",
      videoPlay: false,
      tanchuanglistimage: "",
      activeItemStyle: {
        fontSize: `36rpx`,
      },
      list: [
        {
          name: "关注",
        },
        {
          name: "最新",
        },
        {
          name: "推荐",
        },
        {
          name: "同城",
        },
      ],
      barStyle: {
        boxShadow: `12rpx 12rpx 16rpx #01BEFF`,
      },
      show_fabu: false,
      loading: true,
      skeleton1: {
        avatarSize: "52px",
        row: 3,
        showTitle: true,
      },
      loginBoxFlag: false, // 登录框显示隐藏状态
      cardCur: 0,
      swiperList: [],
      current: 1,
      currenttiezi: 1,
      scrollList: [
        {
          name: "关注",
        },
        {
          name: "首页",
        },
        {
          name: "热门",
        },
      ],
      latestUserAvatar: [],
      bloggerList: [],
      // 内容默认隐藏显示的高度
      contentHideShowHeight: 0,
      content: [],
      adList: [],
      roomlist: [],
      adAutoplay: false,
      mygrouplist: [],
      bloggerhotList: [],
      tanchuangshow: false,
      msgcount: 0,
      iconnew: [],
      huodonglist: [],
    };
  },
  onShow() {},

  onLoad(option) {
    uni.setNavigationBarTitle({
      title: this.configInfo.shoname,
    });
    uni.$on("fabu_ok", (data) => {
      setTimeout(() => {
        this.content = [];
        this.mescroll.resetUpScroll();
      }, 1500);
    });
    this.info();
  },
  onPullDownRefresh() {
    this.info();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },

  mounted() {
    let that = this;
    that.initContentData();
    that.contentHideShowHeight = uni.upx2px(56) * 3;
    that.adAutoplay = true;

    uni.$off("setLoginBoxFlag_home");
    uni.$on("setLoginBoxFlag_home", (loginBoxFlag) => {
      that.loginBoxFlag = loginBoxFlag;
    });

    that.msgcoutget();
    // 注册接受消息监听
    uni.$on("listMessage", (message) => {
      if (
        message.type == "hongbaonew" ||
        message.type == "text" ||
        message.type == "liwuuser" ||
        message.type == "mp3" ||
        message.type == "image"
      ) {
        setTimeout(() => {
          that.msgcoutget();
        }, 1000);
      }
    });
  },

  methods: {
    async msgcoutget() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/getmsgcount",
        data: {},
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.msgcount = result.data.msg;
          if (this.msgcount <= 0) {
            uni.removeTabBarBadge({ index: 2 }); //移除条数
          } else {
            uni.setTabBarBadge({
              index: 2,
              text: `${this.msgcount}`,
            });
          }
        }
      }
    },
    async fabu() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/guangChang",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.tags = result.data.data.tags;
          that.body = result.data.data;
          if (!this.body.shengri || !this.body.new_city || !this.body.xueli) {
            this.tishishow = true;
            this.titletip = "你需要完善居住地和学历信息！";
          } else if (!this.body.avatar) {
            this.tishishow = true;
            this.titletip = "请上传头像";
          } else {
            this.navigateToFn({
              url: "/circleMixinPages/edit",
              checkLogin: true,
            });
          }
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/guangChang",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.tags = result.data.data.tags;
          that.body = result.data.data;
          that.huodonglist = this.body.huodonglist;
          that.bloggerList = result.data.data.bloggerList;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
    onTabItemTap(e) {
      console.log("在首页点击按钮");
      console.log(e);
      if (e.index == 2) {
        uni.navigateTo({
          url: "/circleMixinPages/edit?tab=1",
        });
      }
    },

    screenChange(e) {
      let _this = this;
      let fullScreen = e.detail.fullScreen;
      if (!fullScreen) {
        _this.videoContext.pause();
        _this.videoPlay = false;
      }
    },
    videoShow(vod) {
      let _this = this;
      _this.vodurl = vod;
      _this.videoPlay = true;
      _this.videoContext = uni.createVideoContext("myvideo", _this);
      _this.videoContext.requestFullScreen();
      _this.videoContext.play();
    },

    /// 列表调用

    downCallback(mescroll) {
      if (this.current == 0) {
        this.myinfo();
      }
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    async upCallback(mescroll) {
      let that = this;
      let hot_tyoe = 0;
      let fujin = "";

      if (that.currenttiezi == 0) {
        hot_tyoe = 1;
      }

      if (that.currenttiezi == 1) {
        fujin = false;
      }
      if (that.currenttiezi == 2) {
        hot_tyoe = 2;
      }
      if (that.currenttiezi == 3) {
        fujin = true;
      }

      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/index/getGoodslist",
        data: {
          latitude: uni.getStorageSync("latlng").latitude,
          longitude: uni.getStorageSync("latlng").longitude,
          fujin: fujin,
          hot_type: hot_tyoe,
          page: mescroll.num,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (mescroll.num == 1) {
            that.content = result.data.data.data;
          } else {
            that.content = that.content.concat(result.data.data.data);
          }
          mescroll.endSuccess(
            result.data.data.data.length,
            result.data.data.data.length >= mescroll.size
          );
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current;
      for (let i = 0; i < this.swiperList.length; i++) {
        const videoContext = uni.createVideoContext(
          `video-${this.swiperList[i]["id"]}`,
          this
        );
        if (i === this.cardCur) {
          // #ifdef H5
          videoContext.play();
          // #endif
          // #ifndef H5
          videoContext.play();
          // #endif
        } else {
          // #ifdef MP
          videoContext.stop();
          // #endif
          // #ifndef MP
          videoContext.pause();
          // #endif
        }
      }
    },
    // 暂停所有视频
    stopAllVideo() {
      this.current = 0;
    },

    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 震动跳转
    navCreate(e) {
      wx.vibrateLong();
      uni.navigateTo({
        url: "/circleMixinPages/create",
      });
    },
    // 震动跳转
    navBuild(e) {
      wx.vibrateLong();
      uni.navigateTo({
        url: "/circleMixinPages/build",
      });
    },
    // 处理内容，给内容添加对应的标识信息
    initContentData() {
      this.content.forEach((item, index) => {
        // 是否需要隐藏内容
        item.hideContent = false;
        // 显示所有内容
        item.showAllContent = false;
        // 内容容器的实际高度
        item.contentContainerHeight = 0;
        // 内容容器是否初始化完成
        item.contentContainerInit = false;
        this.$set(this.content, index, item);
      });
    },
    // 获取内容容器的信息
    getContentRectInfo() {
      let contentRect = {};
      const query = uni.createSelectorQuery().in(this);
      // 筛选出存在内容的数据
      this.content.forEach((item, index) => {
        if (item?.content) {
          query.select(`#blogger__content--${index}`).boundingClientRect();
          contentRect[index] = item;
        }
      });
      // 获取所有内容的宽高信息
      query.exec((res) => {
        if (!res) {
          setTimeout(() => {
            this.getContentRectInfo();
          }, 10);
          return;
        }
        // console.log(res);
        res.map((item) => {
          // console.log(item.height, this.contentHideShowHeight);
          // 获取对应的标号
          const id = item.id;
          const idIndex = /blogger__content--(\d)/.exec(id)[1];
          let contentItem = this.content[idIndex];
          contentItem.hideContent = item.height > this.contentHideShowHeight;
          contentItem.showAllContent = false;
          contentItem.contentContainerHeight = item.height;
          contentItem.contentContainerInit = true;
          this.$set(this.content, idIndex, contentItem);

          // console.log(/blogger__content--(\d)/.exec(id)[1]);
        });
      });
    },
    // 切换内容的显示与隐藏
    switchContentShowStatus(index) {
      const contentItem = this.content[index];
      contentItem.showAllContent = !contentItem.showAllContent;
      this.$set(this.content, index, contentItem);
    },
    // 关闭压屏窗
    closeLandscape() {
      this.tanchuangshow = false;
      this.show_fabu = false;
    },
    hpicto(index) {
      if (this.swiperList[index].url && this.swiperList[index].leixing == 0) {
        this.tn(
          "/circleMixinPages/details?id=" + this.swiperList[index].url + ""
        );
      }
      if (this.swiperList[index].url && this.swiperList[index].leixing == 1) {
        this.tn(
          "/circleMixinPages/group?id=" + this.swiperList[index].url + ""
        );
      }
      if (this.swiperList[index].url && this.swiperList[index].leixing == 2) {
        this.navigateToFn({
          url:
            "/mineMixinPages/chat/room_text?id=" + this.swiperList[index].url,
          checkLogin: true,
        });
      }
      if (this.swiperList[index].url && this.swiperList[index].leixing == 4) {
        this.tn("/shopPages/product?id=" + this.swiperList[index].url + "");
      }
      if (this.swiperList[index].url && this.swiperList[index].leixing == 5) {
        this.tn(
          "/circleMixinPages/team/show?id=" + this.swiperList[index].url + ""
        );
      }
    },
    tanchuang() {
      if (this.tanchuanglist.url && this.tanchuanglist.leixing == 0) {
        this.tn("/circleMixinPages/details?id=" + this.tanchuanglist.url + "");
      }
      if (this.tanchuanglist.url && this.tanchuanglist.leixing == 1) {
        this.tn("/circleMixinPages/group?id=" + this.tanchuanglist.url + "");
      }
      if (this.tanchuanglist.url && this.tanchuanglist.leixing == 2) {
        this.navigateToFn({
          url: "/mineMixinPages/chat/room_text?id=" + this.tanchuanglist.url,
          checkLogin: true,
        });
      }
      if (this.tanchuanglist.url && this.tanchuanglist.leixing == 4) {
        this.tn("/shopPages/product?id=" + this.tanchuanglist.url + "");
      }
      if (this.tanchuanglist.url && this.tanchuanglist.leixing == 5) {
        this.tn(
          "/circleMixinPages/team/show?id=" + this.tanchuanglist.url + ""
        );
      }
    },
    refreshFn() {},
    jinruroom(id) {
      // #ifdef APP-PLUS
      this.navigateToFn({
        url: "/mineMixinPages/chat/room_text?id=" + id,
        checkLogin: true,
      });
      // #endif
      // #ifndef APP-PLUS

      this.navigateToFn({
        url: "/mineMixinPages/chat/room_text?id=" + id,
        checkLogin: true,
      });
      // #endif
    },

    geturl(item) {
      if (item.appId) {
        // #ifdef MP
        uni.navigateToMiniProgram({
          appId: item.appId,
          path: item.page_url,
          success(res) {
            // 打开成功
          },
        });
        // #endif
        // #ifndef MP
        this.msg("小程序内使用");
        // #endif
      } else {
        this.navigateToFn({
          url: item.page_url,
          checkLogin: true,
        });
      }
    },

    tabsChange(index) {
      let that = this;
      this.currenttiezi = index;
      if (index == 0) {
        if (!uni.getStorageSync("token")) {
          this.loginBoxFlag = true;
          return false;
        }
      }

      if (index == 3) {
        // #ifdef APP-PLUS||H5
        uni.getLocation({
          type: "gcj02",
          geocode: true,
          success: function (res) {
            uni.setStorageSync("latlng", res);
            console.log(res);
            that.mescroll.resetUpScroll();
          },
          fail: function (res) {
            console.log(res);
          },
        });
        // #endif

        // #ifdef MP
        wx.getFuzzyLocation({
          type: "wgs84",
          success(res) {
            uni.setStorageSync("latlng", res);
            that.mescroll.resetUpScroll();
          },
        });
        // #endif
      }
      this.mescroll.resetUpScroll();
    },

    msggai(shuzi) {
      if (shuzi <= 0) {
        uni.removeTabBarBadge({ index: 2 }); //移除条数
      } else {
        uni.setTabBarBadge({
          index: 2,
          text: `${shuzi}`,
        });
      }
    },
    gengxin() {
      // 获取本地应用资源版本号
      plus.runtime.getProperty(plus.runtime.appid, (inf) => {
        uni.request({
          url: host + "/chat/index/app_up", //示例接口
          data: {
            edition_type: plus.runtime.appid,
            version_type: uni.getSystemInfoSync().platform,
            edition_number: inf.versionCode,
          },
          success: (res) => {
            //	console.log(res.data.data)
            //	console.log(inf.versionCode)

            if (
              Number(res.data.data.edition_number) > Number(inf.versionCode) &&
              res.data.data.edition_issue == 1
            ) {
              if (
                res.data.data.package_type == 1 &&
                res.data.data.edition_silence == 1
              ) {
                silenceUpdate(res.data.data.edition_url);
              } else {
                //跳转更新页面 （注意！！！如果pages.json第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在setTimeout里面设置延时3到5秒再执行）
                uni.navigateTo({
                  url:
                    "/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=" +
                    JSON.stringify(res.data.data),
                });
              }
            } else {
            }
          },
        });
      });
    },
    tiaozhuan() {
      uni.navigateToMiniProgram({
        appId: "wxd2ade0f25a874ee2", // 此为生活缴费appid
        path: "main/pages/nativeindex/nativeindex", // 此为生活缴费首页路径
        envVersion: "release",
        success: (res) => {
          console.log("打开成功", res);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.template-circle {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
}

.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}

/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;
  //	background-image: repeating-linear-gradient(-45deg, #fbf7ac69, #fff20014);
  color: #080808;

  &__back {
    margin: auto 5rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    margin-left: 30rpx;
    flex-basis: 5%;
  }

  &__search {
    flex-basis: 60%;
    width: 100%;
    height: 100%;

    &__box {
      width: 100%;
      height: 70%;
      padding: 10rpx 0;
      margin: 0 30rpx;
      border-radius: 60rpx 60rpx 0 60rpx;
      font-size: 24rpx;
    }

    &__icon {
      padding-right: 10rpx;
      margin-left: 20rpx;
      font-size: 30rpx;
    }

    &__text {
      color: #aaaaaa;
    }
  }
}

.logo-image {
  width: 60rpx;
  height: 60rpx;
  position: relative;
  margin-top: -15rpx;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 50%;
}

/* 自定义导航栏内容 end */
/* 博主头像 start*/
.image-circle {
  // padding: 95rpx;
  width: 190rpx;
  height: 190rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 10rpx;
}

/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__desc {
    line-height: 55rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00ffc8;
        padding-right: 10rpx;
      }
    }

    &__content {
    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;
    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82b2ff;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      max-width: 80%;
      max-height: 300rpx;
    }

    &--2 {
      max-width: 260rpx;
      max-height: 260rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }

      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }

      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/

/* 广告内容 start */
.ad-image {
  width: 80rpx;
  height: 80rpx;
  position: relative;
}

.ad-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 20%;
}

/* 自定义导航栏内容 end */

/* 全屏轮播  start*/

/* 轮播视觉差 start */
.card-swiper {
  height: 200rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  // padding: 0rpx 30rpx 90rpx 30rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.card-swiper swiper-item .swiper-item-text {
  margin-top: -260rpx;
  text-align: center;
  width: 100%;
  display: block;
  height: 50%;
  border-radius: 10rpx;
  transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
  margin-top: -320rpx;
  width: 100%;
  transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
}

.image-banner {
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-banner image {
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication {
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.spot {
  background-color: #ffffff;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active {
  opacity: 1;
  width: 30rpx;
  background-color: #ffffff;
}

/* 资讯主图 start*/
.image-article {
  border-radius: 8rpx;
  border: 1rpx solid #f8f7f8;
  width: 200rpx;
  height: 200rpx;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 10rpx;
}

.article-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 文字截取*/
.clamp-text-1 {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.clamp-text-2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 35rpx;
    padding: 5rpx 25rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

/* 悬浮 */
.tnxuanfu {
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.8rem);
  }
}

/* 悬浮按钮 */
.button-shop {
  width: 90rpx;
  height: 90rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  /* bottom:200rpx;
      right: 20rpx; */
  left: 5rpx;
  top: 5rpx;
  z-index: 1001;
  border-radius: 100px;
  opacity: 0.9;
}

/* 按钮 */
.edit {
  bottom: 300rpx;
  right: 75rpx;
  position: fixed;
  z-index: 9999;
}

.pa,
.pa0 {
  position: absolute;
}

.pa0 {
  left: 0;
  top: 0;
}

.bg0 {
  width: 100rpx;
  height: 100rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg1 {
  width: 100%;
  height: 100%;
}

.hx-box {
  top: 50%;
  left: 50%;
  width: 100rpx;
  height: 100rpx;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}

.hx-box .pr {
  width: 100rpx;
  height: 100rpx;
  transform-style: preserve-3d;
  animation: hxz 20s linear infinite;
}

@keyframes hxz {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-360deg);
  }
}

.hx-box .pr .pa0 {
  width: 100rpx;
  height: 100rpx;
  /* border: 4px solid #5ec0ff; */
  border-radius: 1000px;
}

.hx-box .pr .pa0 .span {
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png)
    no-repeat center center;
  background-size: 100% 100%;
  animation: hx 4s linear infinite;
}

@keyframes hx {
  to {
    transform: rotate(360deg);
  }
}

.hx-k1 {
  transform: rotateX(-60deg) rotateZ(-60deg);
}

.hx-k2 {
  transform: rotateX(-30deg) rotateZ(-30deg);
}

.hx-k3 {
  transform: rotateX(0deg) rotateZ(0deg);
}

.hx-k4 {
  transform: rotateX(30deg) rotateZ(30deg);
}

.hx-k5 {
  transform: rotateX(60deg) rotateZ(60deg);
}

.hx-k6 {
  transform: rotateX(90deg) rotateZ(90deg);
}

.drag-button {
  background: #ffffff;
  border: 0.5px solid #eeeeee;
  box-shadow: 0 5rpx 10rpx 0 rgba(0, 0, 0, 0.08);
  width: 100rpx;
  height: 100rpx;
  font-size: 24rpx;
  color: #000000;
  position: absolute;
  right: 40rpx;
  bottom: 188rpx;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-music {
  padding: 100rpx 0rpx;
  font-size: 16rpx;
  font-weight: 300;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 20rpx 20rpx 0 0;
}

/* 文章内容 end*/

/* 信息展示 start */
.tn-info {
  &__container {
    margin-top: 40rpx;
  }

  &__item {
    width: 32%;
    margin: 15rpx 0rpx;
    padding: 38rpx 20rpx;
    border-radius: 10rpx;

    &__left {
      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg3.png);
        }
      }

      &__content {
        font-size: 28rpx;

        &--data {
          margin-top: 5rpx;
          font-weight: bold;
        }
      }
    }

    &__right {
      &--icon {
        font-size: 30rpx;
        opacity: 0.5;
      }
    }
  }
}

.job-shadow {
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  border-radius: 20rpx;
}

/* 信息展示 end */

//一排3个横的

.dk-fangkuang {
  position: relative;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  //background-image: url(https://uptx-cdn2.q0n5k964.com/upload/images/base_web_per/lol_257154660915053_pc_rec_01.png);
}

.dk-ban {
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.3125rem;
  background: rgb(29, 33, 43);
  color: rgba(255, 255, 255, 0.8);
}

.dk-bantext {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(216, 216, 216, 0.08);
  border-right: 0.0625rem solid rgba(255, 255, 255, 0.1);
  min-width: 7.3rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  cursor: pointer;
  padding: 0px 10px;
}

.tn-icon-voice {
  animation: msClock 1.2s linear infinite;
}

@keyframes msClock {
  0%,
  90%,
  100% {
    transform: rotate(0) scale(1);
  }

  20%,
  40% {
    transform: rotate(-15deg) scale(1.2);
  }

  30%,
  50% {
    transform: rotate(15deg) scale(1.3);
  }
}

/* 热门图片 start*/
.image-tuniao1 {
  padding: 164rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-tuniao2 {
  padding: 75rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-tuniao3 {
  padding: 90rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}

.image-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 10rpx;
}
.icon12 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 图标容器7 start */
.icon7 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 10rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 120rpx;
      height: 120rpx;
      font-size: 50rpx;
      border-radius: 0;
      margin-bottom: -10rpx;
      position: relative;
      z-index: 1;
    }
  }
}
.wuge {
  width: 20%;
}
.sige {
  width: 25%;
}
.huati {
  width: 316rpx;
  height: 420rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  /* 暗色调渐变3 */
  border: 1px solid transparent;
  background-image: linear-gradient(#372e77, #372e77),
    // 跟背景色保持一致，根据实际情况修改
    linear-gradient(
        135deg,
        rgba(194, 54, 253, 1),
        rgba(97, 70, 255, 1),
        rgba(67, 169, 241, 1)
      );
  background-origin: border-box;
  background-clip: content-box, border-box;

  .huatititle {
    font-style: italic;
    font-size: 28rpx;
    font-weight: 900;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
.huatiList {
  height: 60rpx;
  margin-bottom: 20rpx;
  &:last-child {
    margin-bottom: 0;
  }
  .huati-item {
    ::v-deep p {
      max-width: 160rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
/* 计划内容 start*/
.tn-plan-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 15rpx;
    margin: 20rpx 20rpx 5rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

.tn-plan-content2 {
  &__item {
    line-height: 45rpx;
    padding: 15rpx 30rpx;
    margin: 30rpx 0rpx 10rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}
.fab {
  width: 260rpx;
  height: 60rpx;
  font-family: Source Han Sans;
  font-weight: bold;
  background: linear-gradient(
    180deg,
    rgba(65, 133, 255, 0.8) 0%,
    rgba(85, 223, 252, 0.8) 100%
  );
  position: fixed;
  bottom: 140rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  border-radius: 130rpx;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
  }
}
</style>
